<!doctype html>
<html>
<head>
  <script type="module" src="../../polymer-legacy.js"></script>
  <script type="module" src="../../lib/mixins/disable-upgrade-mixin.js"></script>
</head>
<body>
  <script type="module">
import { DisableUpgradeMixin } from '../../lib/mixins/disable-upgrade-mixin.js';
const ogDefine = window.customElements.ogDefine = window.customElements.define;
window.customElements.defineWithDisabled = function(name, constructor) {
  return ogDefine.call(customElements, name,
    DisableUpgradeMixin(constructor));
}
window.customElements.define = window.customElements.defineWithDisabled;
</script>

  <dom-module id="x-disabled">

    <template>
      <style>
        :host {
          display: block;
        }

        h2 {
          letter-spacing: 1em;
        }
      </style>
      <h2>[[prop]]</h2>
    </template>

    <script type="module">
import '../../lib/mixins/disable-upgrade-mixin.js';
import { PolymerElement } from '../../polymer-element.js';
class Disabled extends PolymerElement {
  static get is() { return 'x-disabled'; }
  static get properties() {
    return {
      prop: {
        type: String
      }
    }
  }
  constructor() {
    super();
    this.prop = 'enabled!';
  }
}
customElements.define(Disabled.is, Disabled);
</script>

  </dom-module>

  <dom-module id="my-element">

    <template>
      <style>
        :host {
          display: block;
        }

        button {
          display: block;
        }
      </style>
      <h3>x-disabled without disable-upgrade</h3>
      <x-disabled>Disabled</x-disabled>
      <h3>x-disabled with disable-upgrade</h3>
      <x-disabled id="disabled" disable-upgrade>Disabled</x-disabled>
      <h3>x-disabled with disable-upgrade</h3>
      <x-disabled disable-upgrade$="[[upgradeDisabled]]">Disabled</x-disabled>
      <button on-click="_enable">Enable</button>
    </template>

    <script type="module">
import '../../lib/mixins/disable-upgrade-mixin.js';
import { PolymerElement } from '../../polymer-element.js';


class MyElement extends PolymerElement {
  static get is() { return 'my-element'; }
  static get properties() {
    return {
      upgradeDisabled: {value: true}
    }
  }
  _enable() {
    this.$.disabled.removeAttribute('disable-upgrade');
    this.upgradeDisabled = false;
  }
}
customElements.define(MyElement.is, MyElement);
</script>

  </dom-module>

  <my-element></my-element>

</body>
</html>